<template>
  <a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish">
    <a-row>
      <a-col :span="4">
        <a-form-item has-feedback label="客户" name="cust_id">
          <a-select allowClear v-model:value="formState.cust_id">
            <a-select-option allowClear :value="item.key" v-for="item in queryCustList" :key="item.cust_id">{{
              item.cust_name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="4">
        <a-form-item has-feedback label="日期" name="follow_date">
          <a-date-picker allowClear v-model:value="formState.follow_date" />
        </a-form-item>
      </a-col>
      <a-col :span="4">
        <a-form-item has-feedback label="跟进人员" name="emp_id">
          <a-select allowClear v-model:value="formState.emp_id">
            <a-select-option :value="item.key" v-for="item in queryEmpList" :key="item.emp_id">{{ item.emp_name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="4">
        <a-form-item has-feedback label="跟进方式" name="method">
          <a-select allowClear v-model:value="formState.method">
            <a-select-option :value="item.key" v-for="item in queryMethodList" :key="item.key">{{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="4">
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-item>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24">
        <a-flex justify="flex-end">
          <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button>
        </a-flex>
      </a-col>
    </a-row>
  </a-form>

  <a-row>
    <a-col :span="24">
      <a-table size="small" style="width: 100%" :columns="columns" :data-source="data">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'name'">
            <a>{{ text }}</a>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a type="primary" @click="handleEdit(record)">编辑</a>
            <a type="primary" @click="handleDelete(record)">删除</a>
          </template>
        </template>
      </a-table>
    </a-col>
  </a-row>

  <a-row>
    <a-drawer size="large" v-model:open="open" class="custom-class" root-class-name="root-class-name" style="color: red"
      :title="addFormState.follow_id ? '编辑' : '新增'" placement="right">
      <a-form :rules="addRulesForm" ref="addFormRef" name="custom-validation" :model="addFormState" v-bind="layout"
        @finish="
          addFormState.follow_id
            ? handleEditFinish($event)
            : handleAddFinish($event)
          ">
        <a-form-item has-feedback label="客户" name="cust_id">
          <a-select v-model:value="addFormState.cust_id">
            <a-select-option :value="item.key" v-for="item in custList" :key="item.cust_id">{{ item.cust_name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item has-feedback label="日期" name="follow_date">
          <a-date-picker style="width: 100%" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            v-model:value="addFormState.follow_date" />
        </a-form-item>

        <a-form-item has-feedback label="跟进人员" name="emp_id">
          <a-select v-model:value="addFormState.emp_id">
            <a-select-option :value="item.key" v-for="item in empList" :key="item.emp_id">{{ item.emp_name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item has-feedback label="跟进方式" name="method">
          <a-select v-model:value="addFormState.method">
            <a-select-option :value="item.key" v-for="item in followMethodList" :key="item.key">{{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item has-feedback label="跟进结果" name="result">
          <a-textarea v-model:value="addFormState.result" :rows="4" />
        </a-form-item>

        <a-form-item has-feedback label="跟进建议" name="suggestion">
          <a-spin :spinning="spinning" tip="AI生成中...">
            <a-textarea :rows="6" v-model:value="addFormState.suggestion" />
            <a @click="handleSuggestion"> AI生成 </a>
          </a-spin>
        </a-form-item>

        <a-form-item has-feedback label="下次跟进时间" name="next_date">
          <a-date-picker style="width: 100%" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            v-model:value="addFormState.next_date" />
        </a-form-item>

        <a-form-item has-feedback label="下次跟进计划" name="next_plan">
          <a-textarea :rows="4" v-model:value="addFormState.next_plan" />
        </a-form-item>

        <a-form-item has-feedback>
          <a-col :span="24">
            <a-flex justify="flex-end">
              <a-button type="primary" style="margin-left: 10px" html-type="submit">保存</a-button>
            </a-flex>
          </a-col>
        </a-form-item>
      </a-form>
    </a-drawer>
  </a-row>
</template>
<script setup>
import follow_record from "@/api/modulesApi/business_opportunity_record";
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";
import employeeService from "@/api/modulesApi/employee";
import { customer as customerService } from "@/api/modulesApi/customer";

const spinning = ref(false);

const empList = ref([]);
const getEmp = async () => {
  const res = await employeeService.getEmployee();
  empList.value = res.data;
};
getEmp();

const custList = ref([]);
const getCust = async () => {
  const res = await customerService.getCustList();
  custList.value = res.data;
};
getCust();

const followMethodList = ref([]);
const getFollowMethod = async () => {
  const res = await follow_record.getFollowMethod();
  followMethodList.value = res.data;
};
getFollowMethod();

// 获取查询项客户信息
const queryCustList = ref([]);
const getQueryCust = async () => {
  const res = await follow_record.getQueryCust();
  queryCustList.value = res.data;
};
getQueryCust();

// 获取查询项跟进人员
const queryEmpList = ref([]);
const getQueryEmp = async () => {
  const res = await follow_record.getQueryEmp();
  queryEmpList.value = res.data;
};
getQueryEmp();

// 获取查询项跟进方式
const queryMethodList = ref([]);
const getQueryMethod = async () => {
  const res = await follow_record.getQueryMethod();
  queryMethodList.value = res.data;
};
getQueryMethod();

const columns = [
  {
    title: "跟进编号",
    dataIndex: "follow_id",
    key: "follow_id",
    width: 100,
  },
  {
    title: "客户",
    dataIndex: "cust_id",
    key: "cust_id",
    customRender: ({ text, record }) => {
      return record.cust_name;
    },
    width: 100,
  },
  {
    title: "日期",
    dataIndex: "follow_date",
    key: "follow_date",
    width: 100,
  },
  {
    title: "跟进人员",
    dataIndex: "emp_id",
    key: "emp_id",
    customRender: ({ text, record }) => {
      return record.emp_name;
    },
    width: 100,
  },
  {
    title: "跟进方式",
    dataIndex: "method",
    key: "method",
    width: 100,
  },
  {
    title: "跟进结果",
    dataIndex: "result",
    key: "result",
    width: 100,
  },
  {
    title: "跟进建议",
    dataIndex: "suggestion",
    key: "suggestion",
    // 超出省略
    //
  },
  {
    title: "下次跟进时间",
    dataIndex: "next_date",
    key: "next_date",
    width: 100,
  },
  {
    title: "下次跟进计划",
    dataIndex: "next_plan",
    key: "next_plan",
    width: 100,
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    width: 100,
  },
];

const data = ref([
  {
    follow_id: "FJ20240601001",
    customer: "张三",
    date: "2024-06-01",
    follower: "李四",
    follow_method: "电话",
    follow_result: "已沟通，客户有意向",
    next_suggestion: "发送产品资料",
    follow_suggestion: "加强产品介绍",
    next_follow_time: "2024-06-05",
    next_follow_plan: "电话回访确认需求",
  },
  {
    follow_id: "FJ20240601002",
    customer: "王五",
    date: "2024-06-02",
    follower: "赵六",
    follow_method: "上门拜访",
    follow_result: "客户暂无需求",
    next_suggestion: "定期回访",
    follow_suggestion: "关注客户动态",
    next_follow_time: "2024-06-15",
    next_follow_plan: "微信联系",
  },
  {
    follow_id: "FJ20240601003",
    customer: "李雷",
    date: "2024-06-03",
    follower: "钱七",
    follow_method: "微信",
    follow_result: "客户反馈良好",
    next_suggestion: "邀请参加产品发布会",
    follow_suggestion: "持续跟进",
    next_follow_time: "2024-06-10",
    next_follow_plan: "发送邀请函",
  },
]);

const formRef = ref();
const formState = reactive({
  cust_id: "",
  follow_date: "",
  emp_id: "",
  method: "",
});
const open = ref(false);

const addFormState = reactive({
  cust_id: "",
  follow_date: "",
  emp_id: "",
  method: "",
  result: "",
  suggestion: "",
  next_date: null,
  next_plan: "",
});
const addFormRef = ref();

const addRulesForm = {
  cust_id: [{ required: true, message: "请选择客户" }],
  follow_date: [{ required: true, message: "请选择日期" }],
  emp_id: [{ required: true, message: "请选择跟进人员" }],
  method: [{ required: true, message: "请选择跟进方式" }],
  result: [{ required: true, message: "请选择跟进结果" }],
};

const handleAdd = () => {
  open.value = true;
  addFormState.follow_id = "";
  addFormState.cust_id = "";
  addFormState.follow_date = "";
  addFormState.emp_id = "";
  addFormState.method = "";
  addFormState.result = "";
  addFormState.suggestion = "";
  addFormState.next_date = null;
  addFormState.next_plan = "";
};

const handleEdit = (record) => {
  open.value = true;
  addFormState.follow_id = record.follow_id;
  addFormState.cust_id = record.cust_id;
  addFormState.follow_date = record.follow_date;
  addFormState.emp_id = record.emp_id;
  addFormState.method = record.method;
  addFormState.result = record.result;
  addFormState.suggestion = record.suggestion;
  addFormState.next_date = record.next_date;
  addFormState.next_plan = record.next_plan;
};

const handleAddFinish = async (values) => {
  console.log(values, addFormState);
  await follow_record.addBusinessOpportunityRecord(values);
  getBusinessOpportunityRecord();
  open.value = false;
  message.success("新增成功");
};

const handleEditFinish = async (values) => {
  values.follow_id = addFormState.follow_id;
  await follow_record.editBusinessOpportunityRecord(values);
  getBusinessOpportunityRecord();
  message.success("编辑成功");
  open.value = false;
};

const handleDelete = async (record) => {
  await follow_record.deleteBusinessOpportunityRecord({
    follow_id: record.follow_id,
  });
  getBusinessOpportunityRecord();
  message.success("删除成功");
};

const layout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 14 },
};

const handleFinish = (values) => {
  console.log(values, formState);
  getBusinessOpportunityRecord();

};

const getBusinessOpportunityRecord = async () => {
  const res = await follow_record.getBusinessOpportunityRecord(formState);
  data.value = res.data;
};

getBusinessOpportunityRecord();

const handleSuggestion = () => {
  spinning.value = true;
  console.log(addFormState.result);
  follow_record.suggestion({ result: addFormState.result }).then((res) => {
    addFormState.suggestion = res.data;
  }).catch(() => {
    message.error("AI生成失败");
  }).finally(() => {
    spinning.value = false;
  });
};
</script>
